<template>
	<view class="login-page">
		<u-navbar leftIconColor="#fff" :autoBack="true" :placeholder="true" bgColor="rgba(255,255,255,0.0)">
			<view slot="center" class="nav-title">
				註冊
			</view>
		<!-- 	<view slot="right">
				<image class="nav-right" src="../../static/login/right-icon.png" mode=""></image>
			</view> -->
		</u-navbar>
		<view style="height: 230rpx;"></view>
		<view class="content">
			<view class="title">
				信箱
			</view>
			<view class="item">
				<u--input placeholder="請輸入信箱" border="none" v-model="email"></u--input>
			</view>
			<view class="title">
				信箱驗證碼
			</view>
			<view class="item">
				<u-input placeholder="請輸入信箱驗證碼" v-model="email_code" border="none">
					<template slot="suffix">
						<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新獲取"></u-code>
						<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
					</template>
				</u-input>
			</view>
			<view class="title">
				密碼
			</view>
			<view class="item">
				<u--input type="password" placeholder="請輸入密碼" border="none" v-model="password"></u--input>
			</view>
			<view class="title">
				確認密碼
			</view>
			<view class="item">
				<u--input type="password" placeholder="請再次輸入密碼" border="none" v-model="nextpassword"></u--input>
			</view>
			<view class="title">
				邀請碼
			</view>
			<view class="item">
				<u--input type="password" placeholder="請輸入邀請碼" border="none" v-model="code"></u--input>
			</view>
			<view style="height: 40rpx;"></view>
			<view class="btn">
				<u-button @click="goregister" color="linear-gradient( 159deg, #7DD5CC 0%, #45C5AA 100%)" size="large" type="primary" text="立即註冊"></u-button>
			</view>
			<view class="btn" @click="gologin">
				<u-button color="#18BE8C" size="large" type="primary" :plain="true" text="立即登錄"></u-button>
			</view>
			<view class="tips">
				登錄即代表已閱讀並同意《<text>服務協議</text>》《<text>隱私政策</text>》
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				email:'',
				email_code:'',
				password: '',
				nextpassword:'',
				tips: '',
				status: 0,
				code:''
			}
		},
		onLoad() {

		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(this.email == ''){
					uni.showToast({
						title:'信箱不能為空！',
						icon:'none'
					})
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在獲取驗證碼'
					})
					let params = {
						userName: this.email,
					}
					this.$Request({
						method: 'POST',
						url: '/app-api/member/auth/sendEmailCode',
						data: params,
						ismsg: true,
					}).then(res => {
						console.log(res)
						uni.hideLoading();
						if (res.code == 0) {
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}
					})
				} else {
					uni.$u.toast('倒計時結束後再發送');
				}
			},
			tabsClick(index) {
				this.status = index.index
				console.log(this.status)
			},
			goregister(){
				if(this.email == ''){
					uni.showToast({
						title:'信箱不能為空！',
						icon:'none'
					})
					return
				}
				if(this.password == ''){
					uni.showToast({
						title:'密碼不能為空！',
						icon:'none'
					})
					return
				}
				if(this.email_code == ''){
					uni.showToast({
						title:'驗證碼不能為空！',
						icon:'none'
					})
					return
				}
				if(this.nextpassword == ''){
					uni.showToast({
						title:'確認密碼不能為空！',
						icon:'none'
					})
					return
				}
				if(this.nextpassword != this.password){
					uni.showToast({
						title:'兩次密碼不一致！',
						icon:'none'
					})
					return
				}
				if(this.code == ''){
					uni.showToast({
						title:'請填寫邀請碼！',
						icon:'none'
					})
					return
				}
				uni.showLoading({
					mask:true
				})
				let params = {
					userName:this.email,
					password:this.password,
					code:this.email_code,
					referenceId:this.code
				}
				this.$Request({
					method: 'POST',
					url: '/app-api/member/auth/register',
					data: params,
					ismsg: true,
				}).then(res => {
					uni.hideLoading()
					if (res.code == 0) {
						uni.showToast({
							title:'註冊成功！',
							icon:'none'
						})
						setTimeout(()=>{
							uni.reLaunch({
								url:'/pages/login/index'
							})
						},1000)
					}
				})
			},
			gologin(){
				uni.reLaunch({
					url:'/pages/login/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-page {
		background-image: url('../../static/login/login-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 362rpx;
		.nav-title {
			color: #fff;
		}
		.nav-right {
			width: 41rpx;
			height: 41rpx;
		}

		.content {
			background-color: #fff;
			border-top-right-radius: 30rpx;
			border-top-left-radius: 30rpx;
			padding: 10rpx 30rpx 30rpx 30rpx;

			.title {
				font-size: 26rpx;
				color: #333;
				margin-top: 20rpx;
			}

			.item {
				background-color: #F9F9F9;
				border-radius: 10rpx;
				margin-top: 20rpx;
				padding: 20rpx;
			}

			.btn {
				margin-top: 30rpx;
			}

			.tips {
				position: fixed;
				bottom: 5%;
				left: 0;
				right: 0;
				text-align: center;
				font-size: 24rpx;
				color: #999;

				text {
					color: #18BE8C;
				}
			}
		}
	}
</style>